<!--  -->
<template>
  <div class="hbh-container">
    <commonTitle :title="'设备状态监控'" />
    <div
      class="borad"
      :style="{
        height:
          config.rowNum * (config.columnHeight + config.marginBottom) +
          config.headerHeight -
          config.marginBottom +
          'px',
      }"
    >
      <div class="headeBox" :style="{ height: config.headerHeight + 'px' }">
        <span
          class="sort"
          v-if="config.index"
          :style="{ textAlign: config.align,width: config.sortWidth + 'px' }"
        >
          {{ config.codeSign }}
        </span>
        <span
          v-for="(item, index) in config.header"
          :key="index"
          :style="{ textAlign: config.align }"
        >
          {{ item }}
        </span>
      </div>
      <div
        :class="{ rows: true, anim: item[3] == 0 }"
        :style="{
          height: item[3] + 'px',
          marginBottom: item[3] == 0 ? '0px' : config.marginBottom + 'px',
          backgroundColor:
            item[2] == 'odd' ? config.oddRowBGC : config.evenRowBGC,
        }"
        v-for="(item, index) in config.data"
        :key="index"
      >
        <span
          v-if="config.index"
          class="sort"
          :style="{ textAlign: config.align, width: config.sortWidth + 'px' }"
          >{{ item[1] }}</span
        >
        <span
          v-for="(child, cIndex) in item[0]"
          :key="cIndex"
          :style="{ textAlign: config.align }"
        >
          {{ child }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "eqstatus",
  components: {},
  data() {
    //这里存放数据
    return {
      config: {
        evenRowBGC: "rgba(102,187,249,.2)",
        oddRowBGC: "rgba(102,187,249,.2)",
        headerBGC: "rgba(0,0,0,0)",
        header: ["设备名称", "类型", "状态"],
        data: [
          [["蓝色演示设备", "热泵机", "离线"], "A1", "odd", 50],
          [["蓝色演示设备", "热泵机", "使用中"], "A1", "even", 50],
          [["蓝色演示设备", "热泵机", "故障"], "A1", "odd", 50],
          [["蓝色演示设备", "热泵机", "在线"], "A1", "even", 50],
          [["蓝色演示设备", "热泵机", "在线"], "A1", "odd", 50],
          [["蓝色演示设备", "热泵机", "在线"], "A1", "even", 50],
          [["蓝色演示设备", "热泵机", "在线"], "A1", "odd", 50],
        ],
        sortWidth: 60,
        codeSign: "编号",
        index: true,
        headerHeight: 50,
        marginBottom: 10,
        columnHeight: 50,
        align: [],
        waitTime: 2000,
        rowNum: 4,
      },
      rowNum: 5,
      timers: null,
      off: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    lunbao() {
      if (this.config.data.length <= this.config.rowNum) {
        clearInterval(this.timers);
        this.timers = null;
        return;
      }
      this.$set(this.config.data[0], 3, 0);
      console.log(this.config.data[0], this.config.data);
      setTimeout(() => {
        let tempObject = JSON.parse(JSON.stringify(this.config.data[0]));
        tempObject[3] = 50;
        if (this.config.data[this.config.data.length - 1][2] == "odd") {
          tempObject[2] = "even";
        } else {
          tempObject[2] = "odd";
        }
        this.config.data.push(tempObject);
        this.config.data.shift();
      }, 1500);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.timers = setInterval(this.lunbao, this.config.waitTime);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    clearInterval(this.timers);
    this.timers = null;
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.hbh-container {
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .borad {
    width: 100%;
    overflow: hidden;
    .headeBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;

      span {
        width: 100px;
        padding: 0 10px;
        box-sizing: border-box;
        color: #fff;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .rows {
      width: 100%;
      color: #000;
      overflow: hidden;
      padding: 0 20px;
      box-sizing: border-box;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        padding: 0 10px;
        box-sizing: border-box;
        color: #fff;
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sort {
        height: 30px;
        line-height: 30px;
        border-radius: 6px;
        color: rgba(103, 164, 225, 1);
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        border: 2px solid rgba(103, 164, 225, 0.5);
      }
    }
    .rows:last-child {
      margin: 0;
    }
    .anim {
      transition: height 0.5s;
    }
  }
}
</style>
